<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    body {
        position: relative;
        width: 100%;
    }
    
    .header {
        position: fixed;
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: rgb(184, 201, 221);
    }
    
    .header-left {
        flex: 1;
    }
    
    .header-left h2 {
        color: white;
        text-indent: 1rem;
    }
    
    .search div {
        width: 242px;
        height: 80%;
        position: relative;
        margin: 0 auto;
        /*设置宽度后，居中*/
    }
    
    input,
    button {
        border: none;
        /*无边框样式；元素的总宽度和高度包括边框的宽度 */
        outline: none;
        /*无轮廓样式；轮廓是在元素周围绘制的一条线，在边框之外并且可能与其他内容重叠，以凸显元素，元素的总宽度和高度不受轮廓线宽度的影响。*/
    }
    
    .search {
        display: none;
        flex: 1;
        height: 60%;
    }
    
    .search input {
        width: 100%;
        height: 100%;
        padding-left: 13px;
        border: 2px solid #eee1e1;
        border-radius: 19px;
        /*border-radius 属性用于向元素添加圆角边框：*/
        background: transparent;
        /*背景透明*/
    }
    
    .search button {
        height: 100%;
        width: 42px;
        cursor: pointer;
        /*cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状*/
        position: absolute;
        background: #e2d7d8;
        border-radius: 0 19px 19px 0;
        width: 60px;
        right: 0;
    }
    
    .search button:hover {
        background-color: #d4cece;
        /*点击搜索按钮时的背景颜色*/
    }
    /* 在<button>元素后面插入内容，并设置所插入内容的样式： */
    
    .search button:before {
        content: "搜索";
        /*插入的内容*/
        font-size: 13px;
        /*插入内容的字体大小*/
        color: #F9F0DA;
        /*插入内容的字体颜色*/
    }
    
    .box {
        /* display: flex; */
        width: 100%;
        height: 100vh;
        /* background-color: bisque; */
        padding-top: 50px;
    }
    
    .xuecha {
        position: relative;
        display: inline-block;
        width: 100%;
        height: 100%;
        flex: 10%;
        background-color: pink;
    }
    /* .xuecha-ul {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 50%;
    }
    
    .xuecha-ul li {
        flex: 1;
        display: flex;
        align-items: center;
    
    width: 100%;
    height: 100%;
    padding-left: 15px;
    list-style: none;
}
.xuecha-ul li a {
    display: inline-block;
    flex: 1;
    text-decoration: none;
}
.xuecha-ul li:hover {
    background-color: royalblue;
}
*/
    
    .show {
        flex: 90%;
        display: inline-block;
        position: relative;
        width: 80%;
        height: 100%;
    }
    
    .show table {
        position: absolute;
        width: 800px;
        height: 300px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }
    
    .show table td {
        font-size: 25px;
    }
    
    li {
        list-style: none;
    }
    
    a {
        text-decoration: none;
    }
    
    .nav {
        float: right;
        width: 25%;
        height: 100%;
        display: flex;
        text-align: center;
    }
    
    .nav>li {
        text-align: center;
        float: left;
        flex: 1;
        line-height: 48px;
        margin: 0 5px;
        /* padding: 0 15px; */
    }
    
    .nav-son a {
        display: inline-block;
        width: 100%;
        height: 100%;
        color: rgb(116, 32, 32);
        background-color: violet;
    }
    
    .studentcheck,
    .studentcheck2,
    .studentcheck3 {
        display: none;
    }
    
    #nav02 {
        position: relative;
    }
    
    #className2 {
        position: absolute;
        top: 40px;
    }
    
    .tuichu {
        cursor: pointer;
    }
</style>
<script src="../js/jquery.js"></script>
<script src="./index.js"></script>
<link rel="stylesheet" href="./test.css">
<script src="./test.js"></script>

<body>
    <!-- 头部 -->
    <div class="header">
        <div class="header-left">
            <h2>辅导员平台</h2>
        </div>
        <div class="search">
            <div>

                <input placeholder="按学号查询..." class="inid" name="keyword" type="text">
                <button class="submitId" type="submit"></button>
            </div>
        </div>

        <ul class="nav">

            <li class="nav-son">
                <!-- <a href="#" class="userleave">leave</a> -->
                <!-- <ul class="item"> -->
                <li><a class="tuichu">退出</a></li>
                <!-- </ul> -->
            </li>

        </ul>


    </div>
    <!-- 主体 -->
    <div class="box">
        <!-- <div class="xuecha">
            <ul class="xuecha-ul">
                <li><a href="#" class="inClass">  按班查看考勤 </a> </li>
                <li><a href="#" class="inMajor">  按专业查看考勤 </a> </li>
            </ul>
        </div>

        <div class="show">
            <select name="className" id="className">
                            
            </select>
            <table align="center" border="1" cellspacing="0" cellpadding="0">
                <thead>
                    <th colspan="5">学生考勤</th>
                </thead>

                <tbody>

                    <tr>
                        <td><span class="whereClass"></span></td>
                        <td><span class="allPeople"></span>人</td>
                        <td><span class="turnPeople"></span>人</td>
                        <td><span class="leavePeople"></span>人</td>
                    </tr>

                </tbody>
            </table>
        </div> -->

        <div id="content" class="xuecha">

            <!-- 内容左侧选择区域 -->
            <ul id="cleft">
                <li id="cleft_li01" class="inClass" style="background-color: #ececec;"><img src="font/cnmsb01.png" /><span>按班查看考勤</span></li>
                <li id="cleft_li02" class="inMajor"><img src="font/cnmsb02.png" /><span>按专业查看考勤</span></li>
                <li id="cleft_li03" class="inStudent_id"><img src="font/cnmsb03.png" /><span>按学号考勤</span></li>
                <!-- <li id="cleft_li04"><img src="font/cnmsb04.png" /><span>哈哈哈哈哈</span></li> -->
            </ul>

            <div id="cright">

                <!--第一页 - 首页-HTML页面-->
                <div id="nav01" class="show">
                    <select name="className" id="className">
                            
            </select>
                    <table class="studentcheck" align="center" border="1" cellspacing="0" cellpadding="0">
                        <thead>
                            <th colspan="5">学生考勤</th>
                        </thead>

                        <tbody>

                            <tr>
                                <td><span class="whereClass"></span></td>
                                <td><span class="allPeople"></span>人</td>
                                <td><span class="turnPeople"></span>人</td>
                                <td><span class="leavePeople"></span>人</td>
                            </tr>

                        </tbody>
                    </table>
                </div>


                <!-- 第二页 - 关于本站 -->
                <div id="nav02" class="show">

                    <select name="className2" id="className2">
                            
                    </select>
                    <table class="studentcheck2" align="center" border="1" cellspacing="0" cellpadding="0">
                        <thead>
                            <th colspan="5">学生考勤</th>
                        </thead>

                        <tbody>

                            <tr>
                                <td><span class="whereClass2"></span></td>
                                <td><span class="allPeople2"></span>人</td>
                                <td><span class="turnPeople2"></span>人</td>
                                <td><span class="leavePeople2"></span>人</td>
                            </tr>

                        </tbody>
                    </table>
                </div>
            </div>

            <!-- 第三页 - 站长团队 -->
            <div id="nav03" class="show">
                <table class="studentcheck3" align="center" border="1" cellspacing="0" cellpadding="0">
                    <thead>
                        <th colspan="5">学号考勤</th>
                    </thead>

                    <tbody>

                        <tr>
                            <td><span class="whereClass3"></span></td>
                            <td><span class="classname"></span></td>
                            <td><span class="turnPeople3"></span></td>
                            <td><span class="leavePeople3"></span></td>
                        </tr>

                    </tbody>
                </table>
            </div>

            <div id="nav04">
                呜呜呜
            </div>

        </div>

    </div>
    </div>

    <script>
        $(".nav>li").mouseover(function() {
            $(this).children("ul").show();
        })
        $(".nav>li").mouseout(function() {
            $(this).children("ul").hide();
        })
    </script>
</body>

</html>